<template>
  <el-dialog class="public-dialog" title="批量上传海外仓出库单号" width="960" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    批量上传海外仓出库单号(从Excel中复制 或 以“Tab”制表符号分隔，一行一条记录)，限制为200条
    <div class="flex border-card my-[8px]" :loading="loading">
      <div class="w-[54px] border-right">
        <div class="border-bottom">序号</div>
        <div class="p-[4px] pt-[9px]">
          <div v-for="(i, key) in list" :key="key">
            {{ key + 1 }}
          </div>
        </div>
      </div>
      <div class="flex-1">
        <div class="border-bottom"><span class="mr-[46px]">系统订单号</span> <span>海外仓出库单号</span></div>
        <div class="p-[4px]">
          <el-input v-model="textarea" :autosize="{ minRows: 10 }" class="w-[100%]" show-word-limit type="textarea" @input="inputChange" @keydown.tab.prevent="tabInput" id="my-input-tab" />
        </div>
      </div>
    </div>
    <div>
      说明:发货仓库必须是<span class="text-[red] text-[18px]">海外仓</span>，且订单状态为<span class="text-[red] text-[18px]">已确认</span>时，才能操作，且上传成功后，订单会变为<span
        class="text-[red] text-[18px]"
        >待发货</span
      >状态!
    </div>

    <el-table :data="tableData" class="w-[100%] mt-[8px]" v-if="tableData.length != 0">
      <el-table-column prop="order_sn" label="系统订单号" width="170" />
      <el-table-column prop="overseas_wms_out_number" label="海外仓出库单号" width="200" />
      <el-table-column prop="create_time" label="上传时间" />
      <el-table-column prop="status_desc" label="上传状态" width="140" />
      <el-table-column prop="api_error" label="原因说明" />
    </el-table>

    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSave" :loading="loading"> 保存 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus"
import api from "../../api"
const props = defineProps({})
const modelValue = ref(false)

const emit = defineEmits(["refresh", "submit"])

const loading = ref(false)

const textarea = ref("")

const tabInput = (e) => {
  let input = document.getElementById("my-input-tab")
  let start = input.selectionStart
  textarea.value = textarea.value.substring(0, start) + "     " + textarea.value.substring(start)
  setTimeout(() => {
    // 移动光标位置
    input.setSelectionRange(start + 5, start + 5)
  }, 1)
}
const list = ref([])
const inputChange = (e) => {
  let data = e.split("\n")?.map((v) => v?.split(" ")?.filter(Boolean)?.join("\t"))
  data = data?.map((v) => v?.split("\t")?.filter(Boolean))
  if (data.length > 200) {
    data.length = 200
    let val = e.split("\n")
    val.length = 200
    textarea.value = val.join("\n")
  }
  list.value = data
}

const rules = reactive({
  reason: [{ required: true, message: "请选择取消原因", trigger: "blur" }],
})

const handleSave = async () => {
  try {
    let data = list.value?.filter((v) => v.length)
    let index = data?.findIndex((v) => v.length != 2)
    if (index == -1) {
      let params = {
        sn_mapping: data.map((v) => ({ order_number: v?.[0], out_number: v?.[1] })),
      }
      console.log(params)
      loading.value = true
      api
        .uploadOutNumber(params)
        .then((res) => {
          console.log(res)
          loading.value = false
          handleClose()
        })
        .catch(() => {
          loading.value = false
        })
    } else {
      ElMessage({ showClose: true, message: `第${index + 1}条数据格式有误！`, type: "warning" })
    }
  } catch (e) {
    console.error(e)
  } finally {
  }
}
const tableData = ref([])
const open = (param) => {
  modelValue.value = true
  api.getOutNumber().then((res) => {
    tableData.value = res.data
  })
}
const handleClose = (refresh) => {
  modelValue.value = false
  // getOutNumber

  textarea.value = ""
  list.value = []
  tableData.value = []
  loading.value = false
}

defineExpose({
  open,
})
</script>
<style lang="scss" scoped>
.border-card {
  border: 1px solid #c8c8c8;
}
.border-right {
  border-right: 1px solid #c8c8c8;
}
.border-bottom {
  border-bottom: 1px solid #c8c8c8;
  padding: 8px;
}
</style>
